<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"

                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <f:subview id="provaRespEmbutido" rendered="#{fluxoExibicaoProva.exibirProvaResponder}">
        <h:panelGrid columns="1" id="embProvaResp" width="850" styleClass="center">
            <h:panelGroup id="provaInexistente" rendered="#{provaResponderManager.provaService == null}">
                <p><h:outputText value="#{msg.provaCriarNecessario}" title="#{msg.titleprovaCriarNecessario}"/></p>
            </h:panelGroup>
            <h:panelGroup id="provaExistente" rendered="#{provaResponderManager.provaService != null}">
                <h:form id="questaoAtualForm">
                    <h:panelGrid columns="2" styleClass="bvb-font">
                        <h:outputLabel value="#{msg.questao}:" title="#{msg.titleQuestaoProvaFazendo}" id="labelQuestaoNumero"/>
                        <h:outputText value="#{provaResponderManager.questaoAtual.numeroQuestao}" title="#{msg.titleQuestaoProvaFazendo}">
                            <f:convertNumber pattern="##00"/>
                        </h:outputText>

                        <h:outputLabel value="#{msg.codigo}:" title="#{msg.titleCodigoQuestaoProvaFazendo}" id="labelQuestaoCodigo"/>
                        <h:outputText value="#{provaResponderManager.questaoAtual.questao.id}" title="#{msg.titleCodigoQuestaoProvaFazendo}">
                            <f:convertNumber pattern="#####00000"/>
                        </h:outputText>

                        <h:outputLabel value="#{msg.tipo}:" title="#{msg.titleProvaQuestaoTipoProvaEscolhido}" id="labelTipoProvaEscolhido"/>
                        <h:outputText value="#{msg[provaResponderManager.provaService.prova.tipoProva.labelTP]}" title="#{msg.titleProvaQuestaoTipoProvaEscolhido}" >
                        </h:outputText>
                        
                        <h:outputLabel value="#{msg.titleShow}:" title="#{msg.titleTitleShow}" id="labelTitleShow"/>
                        <h:selectBooleanCheckbox value="#{provaResponderManager.title}" id="titleShowSelect" title="#{msg.titleTitleShow}"
                                                 label="#{msg.titleShow}">
                            <f:ajax event="click" render="enunciadoText labelQuestaoEnunciado"/>
                        </h:selectBooleanCheckbox>

                        <h:panelGroup>
                            <h:panelGrid columns="1">
                                <h:outputLabel value="#{msg.enunciado}:" title="#{provaResponderManager.titleEnunciado}"
                                               id="labelQuestaoEnunciado"/>
                                <p:commandLink onclick="dlg2.show();" styleClass="ui-button_link"
                                               update="questaoAtualForm,messages,:provaRespEmbutido:formdlg2">
                                    <h:graphicImage library="img" name="lente32.png"/>
                                </p:commandLink> 
                            </h:panelGrid>
                        </h:panelGroup>
                        <h:inputTextarea value="#{provaResponderManager.questaoAtual.questao.enunciado}" id="enunciadoText"
                                         title="#{provaResponderManager.titleEnunciado}" readonly="true" rows="#{provaResponderManager.linhas}" cols="120"/>

                        <h:outputLabel value="#{msg['respostas']}:" id="respostasLabel"/>
                        <h:panelGroup>
                            <p:selectOneRadio value="#{provaResponderManager.respostaMarcada}" layout="pageDirection" id="unicaEscolhaSelect"
                                              rendered="#{provaResponderManager.unicaEscolha}"
                                              disabled="#{provaResponderManager.questaoAtual.respondida and provaResponderManager.exibirPieChart()}">  
                                <f:selectItems value="#{provaResponderManager.respostasDisponiveis}"/>  
                                <f:converter converterId="respostaConverter"/>
                            </p:selectOneRadio> 
                            <p:selectManyCheckbox value="#{provaResponderManager.respostasMarcadas}"  
                                                  layout="pageDirection" rendered="#{!provaResponderManager.unicaEscolha}"
                                                  disabled="#{provaResponderManager.questaoAtual.respondida and provaResponderManager.exibirPieChart()}">  
                                <f:selectItems value="#{provaResponderManager.respostasDisponiveis}" />  
                                <f:converter converterId="respostaConverter"/>
                            </p:selectManyCheckbox>
                        </h:panelGroup>

                        <h:outputLabel value=""/>
                        <h:panelGroup id="botoesGroup">
                            <p:commandLink  title="#{msg.titleProvaQuestaoAnterior}" styleClass="ui-button_link"
                                            id="buttonProximaOk"  actionListener="#{provaResponderManager.questaoAnterior(event)}"
                                            rendered="#{provaResponderManager.existeQuestaoAnterior}" update="questaoAtualForm,messages,provaRespEmbutido:formdlg:detail">
                                <h:graphicImage library="img" name="bt_anterior.png"/>
                            </p:commandLink>
                            <h:graphicImage library="img" name="bt_anterior_gr.png" rendered="#{!provaResponderManager.existeQuestaoAnterior}"/>

                            <p:commandLink  title="#{msg.titleProvaQuestaoProxima}"  styleClass="ui-button_link"
                                            id="buttonAnteriorOk"  actionListener="#{provaResponderManager.questaoProxima(event)}"
                                            rendered="#{provaResponderManager.existeQuestaoProxima}" update="questaoAtualForm,messages,:provaRespEmbutido:formdlg:detail">
                                <h:graphicImage library="img" name="bt_proxima.png"/>
                            </p:commandLink>
                            <h:graphicImage library="img" name="bt_proxima_gr.png" rendered="#{!provaResponderManager.existeQuestaoProxima}"/>

                            <p:spacer width="40" height="5"/>

                            <p:commandLink  title="#{msg.titleProvaQuestaoObservacaoCorreta}" 
                                            id="buttonAvaliar"  actionListener="#{provaResponderManager.liberarObservacao(event)}" styleClass="ui-button_link"
                                            rendered="#{provaResponderManager.provaComentada}" update="questaoAtualForm,messages">
                                <h:graphicImage library="img" name="bt_avaliar.png"/>
                            </p:commandLink>

                            <p:commandLink  title="#{msg.titleProvaQuestaoSalvarESair}" 
                                            id="buttonPausa"  actionListener="#{provaResponderManager.atualizaProva()}" oncomplete="confirmation2.show()" styleClass="ui-button_link"
                                            rendered="#{!provaResponderManager.provaComentada}" update="questaoAtualForm,messages,:provaRespEmbutido:formdlg3">
                                <h:graphicImage library="img" name="bt_pausa.png"/>
                            </p:commandLink>

                            <p:commandLink  title="#{msg.titleProvaQuestaoQuadro}" id="buttonQuadro"  oncomplete="dlg.show();"
                                            actionListener="#{provaResponderManager.atualizaProva()}" styleClass="ui-button_link"
                                            update="questaoAtualForm,messages,:provaRespEmbutido:formdlg:detail">
                                <h:graphicImage library="img" name="bt_concluir.png"/>
                            </p:commandLink>
                        </h:panelGroup>

                    </h:panelGrid>

                    <p:spacer width="100%" height="20"/>

                    <h:panelGroup rendered="#{provaResponderManager.liberaComentarios}" id="comentariosGroup">
                        <h:panelGrid columns="2" id="gridComentarios2" styleClass="bvb-font">
                            <f:facet name="header">
                                <h:outputText value="#{msg.provaComentariosPanelGridTitle}" styleClass="formularioTitle"/>
                            </f:facet>

                            <h:outputLabel value="#{msg.objetivoCertificacao}:" title="#{msg.titleObjetivoCertificacao}"
                                           id="labelQuestaoObjetivoCertificacao"/>
                            <p:scrollPanel style="width:780px;height:50px;" >
                                <h:outputText value="#{provaResponderManager.questaoAtual.questao.objetivoCertificacao}" id="titleObjetivoCertificacaoText"
                                              title="#{msg.titleObjetivoCertificacao}"/>
                            </p:scrollPanel>

                            <h:outputLabel value="#{msg.observacao}:" title="#{msg.titleProvaQuestaoObservacao}"
                                           id="labelQuestaoObservacao"/>

                            <p:scrollPanel style="width:780px;height:50px;" >
                                <h:outputText value="#{provaResponderManager.questaoAtual.questao.observacao}" id="titleObservacaoText"
                                              title="#{msg.titleObjetivoCertificacao}"/>
                            </p:scrollPanel>  

                            <h:outputLabel value="#{msg.respostas}:" title="#{msg.titleProvaQuestaoRespostas}"
                                           id="labelRespostaObservacao"/>
                            <p:dataList value="#{provaResponderManager.respostasDisponiveisObservacao}" var="obs" type="ordered">  
                                #{obs}  
                            </p:dataList> 
                        </h:panelGrid>
                    </h:panelGroup>
                    <h:panelGroup id="pieCharNoBack" rendered="#{provaResponderManager.exibirPieChart()}" styleClass="direita">
                        <h:panelGrid columns="2" id="gridPie" >
                            <p:spacer width="100" height="20"/>
                            
                            <p:pieChart value="#{provaResponderManager.pieModel}" style="width:75%;height:200px"
                                        title="#{msg.labelPieNoBack}" legendPosition="w" seriesColors="4bb2c5,FD0729"/>
                        </h:panelGrid>
                    </h:panelGroup>
                </h:form>

                <p:dialog header="#{msg['titleQuadroProva']}" widgetVar="dlg" resizable="false" modal="true" showEffect="highlight" hideEffect="explode"
                          appendToBody="false" minWidth="250" width="250">
                    <h:form id="formdlg" styleClass="center"> 
                        <h:panelGroup id="detail" style="margin-left: 30;">
                            <h:panelGrid columns="3" columnClasses="margemSuperior,margemSuperior,margemSuperior">
                                <h:dataTable value="#{provaResponderManager.provaQuestoesUm}" var="provaQuestao" id="listRespostas1" style="border: none;">  
                                    <h:column>
                                        <h:outputText value="#{provaQuestao.numeroQuestao}" ><f:convertNumber pattern="##00"/></h:outputText>
                                    </h:column>
                                    <h:column>
                                        <h:graphicImage library="img" name="r.png" rendered="#{provaQuestao.respondida}"/>  
                                        <h:graphicImage library="img" name="erro12.png" rendered="#{!provaQuestao.respondida}"/>
                                    </h:column>
                                </h:dataTable> 
                                <h:dataTable value="#{provaResponderManager.provaQuestoesDois}" var="provaQuestao" id="listRespostas2" style="border: none;">  
                                    <h:column>
                                        <h:outputText value="#{provaQuestao.numeroQuestao}" ><f:convertNumber pattern="##00"/></h:outputText>
                                    </h:column>
                                    <h:column>
                                        <h:graphicImage library="img" name="r.png" rendered="#{provaQuestao.respondida}"/>  
                                        <h:graphicImage library="img" name="erro12.png" rendered="#{!provaQuestao.respondida}"/>
                                    </h:column>
                                </h:dataTable> 
                                <h:dataTable value="#{provaResponderManager.provaQuestoesTres}" var="provaQuestao" id="listRespostas3" style="border: none;">  
                                    <h:column>
                                        <h:outputText value="#{provaQuestao.numeroQuestao}" ><f:convertNumber pattern="##00"/></h:outputText>
                                    </h:column>
                                    <h:column>
                                        <h:graphicImage library="img" name="r.png" rendered="#{provaQuestao.respondida}"/>  
                                        <h:graphicImage library="img" name="erro12.png" rendered="#{!provaQuestao.respondida}"/>
                                    </h:column>
                                </h:dataTable> 
                            </h:panelGrid>
                        </h:panelGroup>
                        <h:panelGrid columns="2">
                            <p:commandLink  title="#{msg.titleProvaQuestaoQuadroConcluir}" id="buttonFim"  onclick="dlg.hide();" 
                                            actionListener="#{provaResponderManager.terminarProva()}" styleClass="ui-button_link"
                                            update="messages,painelPrincipal">
                                <h:graphicImage library="img" name="bt_concluir.png"/>
                            </p:commandLink>

                            <p:commandLink  oncomplete="dlg.hide();" styleClass="ui-button_link">
                                <h:graphicImage library="img" name="bt_voltar.png"/>
                            </p:commandLink>
                        </h:panelGrid>
                    </h:form>
                </p:dialog> 

                <p:dialog header="#{msg.enunciado}" widgetVar="dlg2" height="600" width="800" resizable="false" modal="true">  
                    <h:form id="formdlg2" styleClass="esquerda" >
                        <h:inputTextarea value="#{provaResponderManager.questaoAtual.questao.enunciado}" id="enunciadoText2" style="font-size: 12px;"
                                         readonly="true" rows="28" cols="95"/>
                    </h:form>
                </p:dialog> 

                <p:confirmDialog message="#{msg.sairConfirmacaoProva}"  
                                 showEffect="bounce" hideEffect="explode"  
                                 header="#{msg.titleSairDialog}" severity="alert" widgetVar="confirmation2">  
                    <h:form id="formdlg3" styleClass="esquerda" >
                        <p:commandButton value="#{msg.sim}" oncomplete="confirmation2.hide()"  
                                         action="#{loginManager.deslogar()}" />  
                        <p:commandButton value="#{msg.nao}" onclick="confirmation2.hide()" type="button" />   
                    </h:form>
                </p:confirmDialog> 

            </h:panelGroup>
        </h:panelGrid>


    </f:subview>
</ui:composition>
